<template>
  <div class="jueduibujudiv">
    <div class="componentsdiv">
      <components />
    </div>
    <div class="contentdiv">
      <div class="leftpanneldiv">
        <leftpannel />
      </div>
      <div class="centerpanneldiv">
        <centerpannel />
      </div>
      <div class="rightpannel">
        <rightpannel />
      </div>
    </div>
    <div style="position: absolute; right: 0; top: 0; width: 200; height: 50">
      <el-button type="primary" size="default" @click="priviewclick()"
        >预览</el-button
      >
      <el-button type="primary" size="default" @click="saveclick()"
        >保存</el-button
      >
      <el-button type="primary" size="default" @click="testclick()"
        >TEST</el-button
      >
    </div>
  </div>
</template>
<script>
import components from "./componentslist";
import centerpannel from "./centerpannel";
import leftpannel from "./leftpannel";
import rightpannel from "./rightpannel";

import axios from "@/utils/requestshujuyuan";
import { Base64 } from "js-base64";
import uuidv1 from "uuid/v1";

import comlist from "./comlists";

export default {
  components: {
    components,
    centerpannel,
    leftpannel,
    rightpannel,
  },
  data() {
    return {
      resitem: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.loaddata();
  },
  methods: {
    getnamebytype(type) {
      let res = {};
      comlist.data.map((item) => {
        if (type == item.code) {
          res = item;
        }
      });
      return res;
    },
    loaddata() {
      axios
        .get(
          `get?dpkey=${
            this.$route.params.dapingid == ":dapingid"
              ? "350cad60-ca80-11eb-a2c6-333a772719d8"
              : this.$route.params.dapingid
          }`
        )
        .then((res) => {
          this.$store.state.editer.editercomlist = [];
          this.$store.state.editer.rootsetting = JSON.parse(
            Base64.decode(res.data[0].dpvalue)
          );
          this.resitem = res.data[0];
          this.$store.state.editer.rootsetting.two.abs.map((item) => {
            let uuid = uuidv1();
            let comtype = this.getnamebytype(item.componentDetail.type);
            // delete comtype["w"];
            // delete comtype["h"];
            // delete comtype["componentDetail"];
            // delete item.componentDetail['show']
            // delete item.componentDetail['type']
            // delete item.componentDetail['position']
            // delete item.componentDetail['size']
            let tmp = {
              id: uuid,
              // ...comtype,
              name: comtype["name"],
              code: comtype["code"],
              // ...item.componentDetail,
              componentDetail: item.componentDetail,
              active: false,
              update: true,
            };
            this.$store.state.editer.editercomlist.push(tmp);
            tmp.update = false;
            this.$nextTick(function () {
              tmp.update = true;
            });
          });
        });
    },

    saveclick() {
      let resabs = [];
      this.$store.state.editer.editercomlist.map((item) => {
        let resitem = {
          componentDetail: item.componentDetail,
        };
        resabs.push(resitem);
      });

      this.$store.state.editer.rootsetting["two"]["abs"] = resabs;

      axios
        .post("update", {
          dpkey: this.resitem.dpkey,
          dpvalue: Base64.encode(
            JSON.stringify(this.$store.state.editer.rootsetting)
          ),
        })
        .then((res) => {
          this.$message.success("保存配置成功");
          console.log(res);
        });
    },

    saveclick1() {
      let ej = {};

      ej["scale"] = 1;
      ej["rows"] = [];
      ej["abs"] = [
        {
          componentDetail: {
            show: true,
            type: "commongongrejindutiao",
            position: {
              left: "525",
              bottom: "10",
            },
          },
        },
      ];

      axios
        .post("update", {
          dpkey: "350cad60-ca80-11eb-a2c6-333a772719d8",
          dpvalue: Base64.encode(JSON.stringify(ej)),
        })
        .then((res) => {
          console.log(res);
        });
    },
    testclick() {
      console.log(Base64.encode("asdasd"));
      axios.get("get?dpkey=cz").then((res) => {
        console.log(res);
      });

      console.log(this.$store.state.editer.editercomlist);
    },

    priviewclick() {
      this.$store.state.daping.type = "editer";

      let ej = {};

      ej["scale"] = 1;
      ej["rows"] = [];
      ej["abs"] = [
        {
          componentDetail: {
            show: true,
            type: "commongongrejindutiao",
            position: {
              left: "525",
              bottom: "10",
            },
          },
        },
      ];

      this.$store.state.editer.editercomlist.map((item) => {
        if (item["componentDetail"]) {
          ej["abs"].push({
            componentDetail: {
              ...item["componentDetail"],
              show: true,
              type: item.code,
              position: {
                left: item.x,
                top: item.y,
                width: item.w,
                height: item.h,
              },
            },
          });
        }
      });

      this.$root.editerjson = ej;

      this.$router.push(`/yulan/${"editer"}`);
    },
  },
};
</script>
<style lang='scss' scoped>
.jueduibujudiv {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  .componentsdiv {
    height: 100px;
    background-color: #5555;
  }
  .contentdiv {
    background-color: #5055;
    height: calc(100vh - 150px);
    display: flex;
    .leftpanneldiv {
      width: 200px;
      background-color: #5005;
    }
    .centerpanneldiv {
      width: calc(100% - 500px);
      background-color: #5055;
    }
    .rightpannel {
      width: 300px;
      background-color: #0055;
    }
  }
}
</style>